<template>
  <div>
    <el-form ref="form" :model="form" style="margin-left: 200px" label-width="120px">
      <el-form-item label="分公司" v-if="isBranch" required>
        <el-select v-model="form.branchId" multiple style="width: 220px" filterable clearable>
          <el-option
            v-for="item in branchList"
            :label="item.branch_Name"
            :value="item.branch_Id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="分公司" v-else required>
        <el-input v-model="branchName" style="width: 220px" disabled></el-input>
      </el-form-item>
      <el-form-item label="活动名称" style="width: 380px" required>
        <el-input v-model="form.relateName"></el-input>
      </el-form-item>
      <el-form-item label="活动时间" style="width: 380px" required>
        <el-date-picker
          @change="timeChange"
          v-model="form.time"
          type="daterange"
          value-format="yyyy-MM-dd"
          placeholder="选择日期范围">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="设备类型" required>
        <el-radio-group v-model="form.client">
          <el-radio :label="22">IOS</el-radio>
          <el-radio :label="20">安卓</el-radio>
          <el-radio :label="31">惠付通</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="选择皮肤" required>
        <el-button type="primary" @click="checkHf">请选择</el-button>
      </el-form-item>
      <!--<el-form-item label="效果图示例" required>-->
        <!--<el-upload-->
          <!--class="avatar-uploader"-->
          <!--:action="imgAddress"-->
          <!--name="imageFile"-->
          <!--:show-file-list="false"-->
          <!--:on-success="success">-->
          <!--<img v-if="this.imageUrl" :src="this.imgHost + '/' + this.imageUrl" class="avatar">-->
          <!--<i v-else class="el-icon-plus avatar-uploader-icon"></i>-->
        <!--</el-upload>-->
      <!--</el-form-item>-->
      <el-form-item label="备注" style="width: 500px">
        <el-input type="textarea" v-model="form.comments"></el-input>
      </el-form-item>
      <el-form-item style="margin-top: 20px">
        <el-button type="primary" @click="onSubmit">创建</el-button>
        <el-button @click="cancel">取消</el-button>
      </el-form-item>
    </el-form>
    <!--选择皮肤弹窗-->
    <el-dialog class="dialog" title="选择皮肤" :visible.sync="dialogHF">
      <el-table
        :data="hfTable.data"
        border
        style="width: 100%">
        <el-table-column
          prop="skinId"
          label="ID"
          align="center"
          width="180">
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          prop="markId"
          label="标识ID"
          align="center"
          width="100">
        </el-table-column>
        <el-table-column
          label="所属设备"
          width="100"
          align="center">
          <template scope="scope">
            <span v-if="scope.row.equipmentType === 22">IOS</span>
            <span v-if="scope.row.equipmentType === 20">安卓</span>
            <span v-if="scope.row.equipmentType === 31">惠付通</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="skinName"
          label="皮肤名称"
          align="center"
          width="200">
        </el-table-column>
        <el-table-column
          align="center"
          label="皮肤样式">
          <template scope="scope">
            <img :src="imgHost + '/' + scope.row.imgUrl" style="width:300px;height:100px;margin:5px 0" alt="">
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          align="center"
          width="">
          <template scope="scope">
            <el-button v-if="scope.row.isCheck" type="text" size="small">已选择</el-button>
            <el-button v-else :disabled="haveCheck" @click="check(scope.$index, scope.row)" size="small">选择</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @current-change="handleCurrentChange"
        :page-size="Number(hfTable.pageSize)"
        layout="total, prev, pager, next"
        :total="Number(hfTable.total)"
        style="padding-top:10px;text-align: right;">
      </el-pagination>
    </el-dialog>
  </div>
</template>
<script>
  import { apiHost, apiURL } from '../../../config/settings.js'
  import { column } from '../../../config/proxy.js'
  import mixins from '../../../components/mixins.vue'
  import Vue from 'vue'
  import { mapState } from 'vuex'
  export default {
    mixins: [mixins],
    data () {
      return {
        // 选择皮肤
        haveCheck: false,
        dialogHF: false,
        hfTable: {
          data: [],
          page: 1,
          pageSize: 10,
          total: ''
        },
        imgHost: '',
        imgAddress: '',
        imageUrl: '',
        form: {
          branchId: [],
          client: 22,
          skinId: '',
          remark: '',
          relateName: '',
          time: ''
        }
      }
    },
    methods: {
      checkHf () {
        const _data = {
          skinType: 1,
          skinId: '',
          skinName: '',
          state: 0,
          equipmentType: this.form.client,
          page: this.hfTable.page,
          pageSize: 10
        }
        column.hfTemplate.list(_data, (res) => {
          console.log(res, '皮肤模板列表a')
          if (res.message === 'ok') {
            this.haveCheck = false
            this.hfTable.data = res.content.content
            this.hfTable.total = res.content.count
            this.dialogHF = true
          } else {
            this.$message({
              showClose: true,
              message: res.message,
              type: 'error'
            })
          }
        })
      }, // 选择皮肤
      handleCurrentChange (val) {
        this.hfTable.page = val
      },
      timeChange (val) {
        this.form.startTime = val[0]
        this.form.endTime = val[1]
      }, // 时间变化
      onSubmit () {
        if (this.form.branchId.length === 0) {
          this.$message({
            showClose: true,
            message: '请选择分公司',
            type: 'error'
          })
        }
        if (this.form.time === '') {
          this.$message({
            showClose: true,
            message: '请选择时间',
            type: 'error'
          })
        }
        if (this.form.relateName === '') {
          this.$message({
            showClose: true,
            message: '请填写活动名称',
            type: 'error'
          })
        }
        var _data = this.form
        _data.createUser = this.userId
        _data.createUserName = this.userName
        this.isBranch ? _data.branchId = _data.branchId.join(',') : _data.branchId = this.branchId
        console.log(_data)
        column.hfgl.create(_data, res => {
          if (res.message === 'ok') {
            this.$message({
              showClose: true,
              message: '创建成功',
              type: 'success'
            })
            this.$store.dispatch('delTab', {id: 'hfcx_add'})
            this.$store.dispatch('hfcxState', this.$store.state.updateState.hfcxState + 1)
          } else {
            this.form.branchId = []
            this.$message({
              showClose: true,
              message: res.message,
              type: 'error'
            })
          }
        })
      },   // 创建
      cancel () {
        this.$store.dispatch('delTab', {id: 'hfcx_add'})
      },     // 取消
      check (index, row) {
        this.form.skinId = row.skinId
        row.isCheck = true
        this.haveCheck = true
        Vue.set(this.hfTable.data, index, this.hfTable.data[index])
//        this.dialogHF = false
//        const _data = {
//          skinId: row.skinId,
//          updateUser: this.userId,
//          updateUserName: this.userName
//        }
//        column.hfgl.check(_data, res => {
//          if (res.message === 'ok') {
//            this.form.skinId = row.skinId
//            row.isCheck = true
//            this.dialogHF = false
//          } else {
//            this.$message({
//              showClose: true,
//              message: res.message,
//              type: 'error'
//            })
//          }
//        })
      }
//      success (res) {
//        this.imageUrl = res.content.imageUrl
//      },
    },
    computed: mapState({
      userId: function (state) {
        return state.user.info.user_id
      },
      userName: function (state) {
        return state.user.info.user_name
      },
      branchName: function (state) {
        return this.$store.state.user.info.branchId === 1 ? '总公司' : this.$store.state.user.info.branchName
      },
      branchId: function (state) {
        return this.$store.state.user.info.branchId
      }
    }),
    created () {
      this.imgHost = apiHost.imgHost
      this.imgAddress = 'http://' + apiHost.newCms + ':20000' + apiURL.upLoadImage
    }
  }
</script>
<style>
  @media screen and (min-width:1000px) {
    .supplier-form{
      max-width: 600px;
    }
  }
  .el-form--inline div {
    display: inline-block;
    float: left;
  }
  .el-dialog__body {
    padding-top: 0;
  }
  .shuoming {
    line-height: 2;
    font-size: 16px;
    font-weight: 700;
    color: #1f2d3d;
  }
</style>
